<% 
  var headContent = {
%>
<!-- //这里包含需要引入的其他css/js文件 -->
<style>
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .red_border{
      border: solid 1px red;
  }
  .green_border{
      border: solid 1px #5EB85E;
  }
  /*验证：提示信息样式 end*/
  /*附件上传*/
  .am-progress-xs {
    height: .2rem;
  }
  .am-progress {
    margin-bottom: 0;
  }
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
  <form class="am-form" id="tmpForm" method="post" action="">
    <input type="hidden" name="id" value="${id!}" />
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg" onclick="history.back();">视频管理</strong> / <small>详情信息</small></div>
    </div>
    <div class="am-tabs am-margin" data-am-tabs>
      <ul class="am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active"><a href="#tab1">视频详情信息</a></li>
      </ul>
      <div class="am-tabs-bd">
        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                                 是否启用
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                <input type="hidden" name="enabled" value="${enabled!'0'}" />
                <input data-am-switch id="enabled" type="checkbox" <%if(enabled! == 1){%> checked <%}%>data-size="sm" data-off-text="否" data-on-text="是" value="${enabled!'0'}" style="display:none;"/>
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
            </div>
            

            
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                <span  style="color: red;">*</span>名称
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                <input data-validation-message="请输入名称" type="text" id="name"  name="name" placeholder="请输入名称" value="${name!''}" required maxlength="64" />
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg">
                <div class="am-alert am-alert-danger">${videoNameMessages!}</div>
              </div>
            </div>
            
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                视频url
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                 <input type="text" name="url" placeholder="请输入外部视频路径" value="${url!''}"  maxlength="1024" />
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg">
               <div class="am-alert am-alert-danger">${videoUrlMessages!}</div>
              </div>
            </div>
            
            
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                <span  style="color: red;">*</span>排序
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                <input class="js-pattern-sort" data-validation-message="排序不能为空且只能是纯数字" type="text" name="sort" placeholder="请输入排序，只能是纯数字，越小越靠前" value="${sort!'5'}" required maxlength="11"/>
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg">
                <div class="am-alert am-alert-danger">${videoSortMessages!}</div>
              </div>
            </div>
            
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-2 am-u-md-2 am-text-right">
                <span style="color: red;">*</span>图文详情
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                <div class="am-g am-form-group">
                  <div class="am-u-sm-12 am-u-md-12">
                    <script id="detail" name="detail" 5511type="text/plain" style="height:20rem;">
                      ${detail!''}
                    </script>
                  </div>
                </div>
              </div>
              <div class="am-u-sm-2 am-u-md-2 input-msg">
                <div id="alert_detail_msg" class="am-alert am-alert-danger" style="">请编辑图文详情</div>
              </div>
            </div>

            

            
            
            <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                备注
              </div>
              <div class="am-u-sm-8 am-u-md-8">
                <input type="text" name="remark" placeholder="请输入备注" value="${remark!''}" maxlength="128"/>
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
            </div>
        </div>
      </div>
    </div>
    <div class="am-margin">
      <button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="frmSubmit()">提交保存</button>
      <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级</button>
    </div>
  </form>
  <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
  <script src="${base}/template/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
  <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
  <script src="${base}/template/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
  <!-- The basic File Upload plugin -->
  <script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=3"></script>
  <script type="text/javascript" charset="utf-8" src="${base}/ueditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
    $(function() {
      /*是否启用switch开关 begin*/
      $("#enabled").on({
        "switchChange.bootstrapSwitch": function(event, state) {
          var $enabled = $("input[name='enabled']");
          if(state) {
            $enabled.val(1);
          }else{
            $enabled.val(0);
          }
          //console.log($enabled.val());
        }
      });
      /*是否启用switch开关 end*/
      var alert_detail_msg = function(){
        var ue = UE.getEditor('detail');
        var text = ue.getContent();
        if (text.length < 1) {
          $("#alert_detail_msg").show();
          $("#edui1_iframeholder").removeClass("green_border");
          $("#edui1_iframeholder").addClass("red_border");
          return false;
        }else{
          $("#alert_detail_msg").hide();
          $("#edui1_iframeholder").removeClass("red_border");
          $("#edui1_iframeholder").addClass("green_border");
          return true;
        }
      }
      $("#alert_detail_msg").hide();
      var ue = UE.getEditor('detail', {
      toolbars: [
        [
          'fullscreen', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',
          'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
          'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'insertimage', 'emotion', 'scrawl', 'attachment',
          'pagebreak', 'template', '|',
          'horizontal',  'spechars', 'snapscreen', 'wordimage', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol',
          'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|'
        ]
      ]
    });
    ue.addListener('blur',function(editor){
      alert_detail_msg();
    });

      /*表单验证：begin*/
      //自定义规则，用法：验证元素上加class="js-pattern-sort"
      if ($.AMUI && $.AMUI.validator) {
        $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
      }
      $("#tmpForm").validator({
        // 域通过验证时回调
        onValid: function(validity) {
          $(validity.field).closest('.am-form-group').find('.am-alert').hide();
        },
        // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
        onInValid: function(validity) {
          var $field = $(validity.field);
          var $group = $field.closest('.am-form-group');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  
          if (!$alert.length) {
            $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
            appendTo($group.find(".input-msg"));
          }
          console.log("onInValid : "+$field.val());
          $alert.html(msg).show();
        }
      });
      /*表单验证：end*/
      /*附件上传：begin*/
      var jqXHR = $('#fileupload').fileupload({
        url: "${base}/upload/image/",
        dataType: 'json',
        start: function (e) {
          $("#progress-area").removeClass("am-hide");
          $("#progress-text").removeClass("am-text-danger");
          $("#progress-text").html("");
          $(".am-progress-bar").css("width","0%");
        },
        done: function (e, data) {
          console.log(data);
          $("#img_url").val(data.result.url);
          setTimeout(function() {
            $("#progress-area").addClass("am-hide");    
          },1500);        
        },
        progressall: function (e, data) {
          var progress = parseInt(data.loaded / data.total * 100, 10);
          $(".am-progress-bar").css("width",progress + "%");
          $("#progress-text").html(progress + "%");
        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.log("imageupload error！");
          // console.log(jqXHR);
          // console.log(textStatus);
          // console.log(errorThrown);
          $("#progress-area").removeClass("am-hide");
          $("#progress-text").addClass("am-text-danger");
          $("#progress-text").html("imageupload error！");
          $(".am-progress-bar").css("width","0%");
          setTimeout(function() {
            $("#progress-area").addClass("am-hide");    
          },2000);
        },
        fail: function (jqXHR, textStatus) {
          console.log("imageupload fail！");
          // console.log(jqXHR);
          // console.log(textStatus);
          $("#progress-area").removeClass("am-hide");
          $("#progress-text").addClass("am-text-danger");
          $("#progress-text").html("imageupload fail！");
          $(".am-progress-bar").css("width","0%");
          setTimeout(function() {
            $("#progress-area").addClass("am-hide");    
          },2000);
        }
      });
      /*附件上传：end*/
    });
    function frmSubmit(){
      var $myForm = $("#tmpForm");
      if($("input[name='id']").val()){
        $myForm.attr("action","${base}/video/update");
      }else{
        $myForm.attr("action","${base}/video/save");
      }
      $myForm.submit();
    }
  </script>
<%}%>